import React from 'react';
import { Col, Modal, Row, Spin, Table } from 'antd';
import { getAnswerUseing } from '@/services/knowledgemanagement';

class ReferenceCase extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      total: 0,
      visible: false,
      loading: false,
      queryData: {
        current: 1,
        size: 10,
        id: '',
      }
    }
  };

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this)
    }
  }

  info = id => {
    let { queryData } = this.state;
    queryData.id = id;
    this.setState({ queryData, visible: true }, () => this.getList());
  }

  onCancel = () => {
    let { queryData } = this.state;
    queryData.id = '';
    queryData.current = 1;
    this.setState({ queryData, visible: false });
  }

  getList = async () => {
    const { queryData } = this.state;
    let res = await getAnswerUseing({ ...queryData });
    // console.log(res);
    this.setState({ list: res.records, total: res.total, })
  }

  queryByPage = page => {
    let { queryData } = this.state;
    queryData.current = page;
    this.setState({ queryData }, () => this.getList());
  }

  render() {
    const { visible, loading, list, total, queryData } = this.state;
    const columns = [
      {
        width: '40%',
        title: "标准问",
        key: "question",
        dataIndex: "question",
      },
      {
        width: '60%',
        title: "分类",
        key: "categoryInfo",
        dataIndex: "categoryInfo",
      }
    ];

    return (
      <Modal
        title={'引用情况'}
        visible={visible}
        footer={null}
        width={'60vw'}
        onCancel={this.onCancel}
        wrapClassName="referModal"
      >
        <Spin spinning={loading}>
          <p style={{ margin: '-10px 0 15px' }}>被引用到知识点如下：</p>
          <Table
            rowKey={'id'}
            columns={columns}
            dataSource={list}
            style={{ margin: '0 0 -16px' }}
            pagination={{
              total,
              current: queryData.current,
              onChange: this.queryByPage,
              showSizeChanger: true,
              onShowSizeChange: this.queryByPage,
              showQuickJumper: true,
            }}
            scroll={{y:500}}
          />
        </Spin>
      </Modal>
    )
  }
}

export default ReferenceCase;
